import { Button, Input, Radio, Space } from "antd";
import { ForwardOutlined, BackwardOutlined } from "@ant-design/icons";
import { useState } from "react";
import CryptoJS from "crypto-js";

export default () => {
    const [text, setText] = useState("输入要加密的文本");
    const [cipherText, setCipherText] = useState("");
    const [type, setType] = useState("aes");
    const [password, setPassword] = useState("");

    const encrypt = () => {
        try {
            let str = "";
            switch (type) {
                case "aes":
                    str = CryptoJS.AES.encrypt(text, password);
                    break;
                case "des":
                    str = CryptoJS.DES.encrypt(text, password);
                    break;
                case "rabbit":
                    str = CryptoJS.Rabbit.encrypt(text, password);
                    break;
                case "rc4":
                    str = CryptoJS.RC4.encrypt(text, password);
                    break;
                case "tripledes":
                    str = CryptoJS.TripleDES.encrypt(text, password);
                    break;
            }
            setCipherText(str);
        } catch (error) {
            console.log(error);
        }
    };

    const decrypt = () => {
        try {
            let str = "";
            switch (type) {
                case "aes":
                    str = CryptoJS.AES.decrypt(cipherText, password).toString(CryptoJS.enc.Utf8);
                    break;
                case "des":
                    str = CryptoJS.DES.decrypt(cipherText, password).toString(CryptoJS.enc.Utf8);
                    break;
                case "rabbit":
                    str = CryptoJS.Rabbit.decrypt(cipherText, password).toString(CryptoJS.enc.Utf8);
                    break;
                case "rc4":
                    str = CryptoJS.RC4.decrypt(cipherText, password).toString(CryptoJS.enc.Utf8);
                    break;
                case "tripledes":
                    str = CryptoJS.TripleDES.decrypt(cipherText, password).toString(CryptoJS.enc.Utf8);
                    break;
            }
            setText(str);
        } catch (error) {
            console.log(error);
        }
    };

    return (
        <div style={{ display: "flex" }}>
            <div style={{ flex: 1 }}>
                明文：
                <Input.TextArea value={text} style={{ width: "100%", height: 400 }} onChange={(e) => setText(e.target.value)} />
            </div>
            <div style={{ width: 160, margin: "20px 20px" }}>
                <div>
                    加密算法：
                    <Radio.Group onChange={(e) => setType(e.target.value)} value={type}>
                        <Space direction="vertical">
                            <Radio value={"aes"}>AES</Radio>
                            <Radio value={"des"}>DES</Radio>
                            <Radio value={"rc4"}>RC4</Radio>
                            <Radio value={"rabbit"}>Rabbit</Radio>
                            <Radio value={"tripledes"}>TripleDes</Radio>
                        </Space>
                    </Radio.Group>
                </div>
                <div style={{ marginTop: 10 }}>
                    密码：
                    <Input style={{ width: "100%" }} onChange={(e) => setPassword(e.target.value)} />
                </div>
                <div style={{ marginTop: 20 }}>
                    <Button type="primary" block icon={<ForwardOutlined />} onClick={encrypt}>
                        加密
                    </Button>
                    <Button type="primary" block icon={<BackwardOutlined />} style={{ marginTop: 10 }} onClick={decrypt}>
                        解密
                    </Button>
                </div>
            </div>
            <div style={{ flex: 1 }}>
                密文：
                <Input.TextArea value={cipherText} style={{ width: "100%", height: 400 }} onChange={(e) => setCipherText(e.target.value)} />
            </div>
        </div>
    );
};
